<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JSX语法</title>
    <!-- 1. 引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2. 引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="./node_modules/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <!-- <input type="text" placeholder="请输入内容-真实dom"> -->
    <script type="text/babel">
        // 3. 创建React元素/创建虚拟dom-使用JSX语法
        /*
        * jsx语法规则
        * 1.定义虚拟DOM时,不要写引号。
        * 2.标签中混入JS表达式时要用{}
        * 3. 样式的类名指定不要用class,要用className
        * 4. 只允许有一个根节点（3种解决办法[用一个div标签包裹/<></>/React.Fragment标签]）
        *   4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
        *   4.2 推荐用<></>
        * 5. 内联样式,要用style={{key:value}}的形式去写。
        * 6. 标签必须闭合
        * 7. 标签首字母
        *   7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
            7.2   (2),若大写字母开头, react就去演染对应的组件,若组件没有定义,则报错。
        *  语句和表达式
        * 8. 注释 需要在{} 中写
        * 9. false, null, undefined, and true 是合法的子元素，并不会被渲染，直接忽略。
        */

        let count = 100
        let a = 20
        let msg = '你好React'
        let arr = [1, 2, 3]
        let obj = {
            name: 'zhangsan',
            age: 18
        }
        let isShow = true // null undefined 
        let other = null
        let other1 = undefined
        let p1 = <p>这是一个用jsx语法写的段落<span style={{ color: 'red' }}>红色</span></p>
        let item = <>
            <div className='item'>
                <h2 className='title'>中奖列表</h2>
                <p>总数：{count}</p>
                <input type="text" placeholder="请输入内容" />
                <hr />
                <br />
                {
                    // 不被浏览器识别的标签首字母小写-报错
                    // <myTable>MyTable</myTable>
                }
                {/* 
        // 不被浏览器识别首字母大写-报错
        <MyTable>MyTable</MyTable>
        */ }
            </div>
            <h2>表达式</h2>
            <ul>
                <li>a: {a}</li>
                <li>a+count: {a + count}</li>
                <li>msg: {msg}</li>
                <li>arr-map: {arr.map(item => item + 2)}</li>
                <li>obj：{obj.name}-{obj.age}</li>
                <li>jsx本身是一个表达式: {p1}</li>
                <li>isShow: {isShow ? '显示' : '隐藏'}</li>
                <li>null: {other}</li>
                <li>undefined: {other1}</li>
            </ul>
            <h2>语句</h2>
            <p>

                {
                    "(1).if(){}"
                }
                <br />
                {
                    "(2).for"
                }
                <br />

                {
                    "(3).switch(){case 1:xxxx}"
                }

            </p>
        </>
        // 4. 创建根节点
        let root = ReactDOM.createRoot(document.getElementById('root'))
        // 5. 把虚拟dom渲染到页面中
        root.render(item)
        console.log('vdom', item)
        console.log('tdom', document.getElementById('root'))





    </script>
</head>

<body>

</body>

</html>